<template>
  <div>
    <hr>
    <h2>Computed组件 --- 计算属性函数</h2>
    <div>今年: {{ age }}岁</div>
    <div>后面: {{ newAge }}岁</div>
  </div>
</template>

<script>
import {ref, computed} from "vue";

export default {
  name: "Computed",
  /**
   *
   * Vue3.0计算属性使用原理同Vue2.0, 只不过vue3.0的计算属性不再是$options选项,
   * 而是一个函数, 可以多次使用, 也是一定要有返回值的
   * @return {{newAge: ComputedRef<unknown>, age: Ref<UnwrapRef<number>>}}
   */
  setup() {
    // 1.计算属性: 当你需要依赖现有的响应式数据, 根据一定逻辑到的一个新的数据.
    const age = ref(18);
    const newAge = computed(() => {
      // 该函数返回值就是计算属性的值, 且一定要有return语句
      return age.value + 2
    })

    return {
      age, newAge
    }
  }
}
</script>

<style scoped>

</style>
